<template>
  <!-- ISV支付配置 -->
  <div class="isvconfiglist">
    <!-- 导航 -->
    <tz-breadcrumb :pathArr='[{"name": "isv管理"},{"name": "ISV配置列表", "url": "isvconfiglist"}]'></tz-breadcrumb>
    <!-- 数据表单 -->
    <div style="margin: 20px;"></div>
    <el-card class="box-card">
      <!-- <div slot="header" class="clearfix">
    <span>ISV服务商-各支付渠道配置</span>
    <el-button style="float: right; padding: 3px 0" type="text"></el-button>
  </div> -->
      <div class="text item">
        <el-tabs value="alipay"
                 @tab-click="handleClick"
                 v-loading="loading">
          <el-tab-pane label="支付宝"
                       name="alipay">
            <!-- 支付宝配置列表 -->
            <el-card class="box-card">
              <div slot="header"
                   class="clearfix">
                <span>支付宝配置列表</span>
              
              </div>
              <div class="text item">
                <template>
                  <el-table :data="tableData01"
                            style="width: 100%">
                    <el-table-column prop="user_id"
                                     label="用户ID"
                                     width="80">
                    </el-table-column>
                    <el-table-column prop="user_phone"
                                     label="用户电话"
                                     width="120">
                    </el-table-column>
                    <el-table-column prop="app_name"
                                     label="App名称"
                                     width="120">
                    </el-table-column>
                    <el-table-column prop="app_id"
                                     label="appid"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="pid"
                                     label="pid"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="created_at"
                                     label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template>
                        <el-button type="primary"
                                   plain
                                   icon="el-icon-setting"
                                   size="small"
                                   >查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="微信支付"
                       name="weixin"
                       :lazy=true>
            <!-- 微信配置 -->
            <el-card class="box-card">
              <div slot="header"
                   class="clearfix">
                <span>微信配置列表</span>
              
              </div>
              <div class="text item">
                <template>
                  <el-table :data="tableData01"
                            style="width: 100%">
                    <el-table-column prop="user_id"
                                     label="用户ID"
                                     width="50">
                    </el-table-column>
                    <el-table-column prop="user_phone"
                                     label="用户电话"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="app_name"
                                     label="App名称"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="merchant_id"
                                     label="商户号"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="created_at"
                                     label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template>
                        <el-button type="primary"
                                   plain
                                   icon="el-icon-setting"
                                   size="small"
                                   >查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="网商银行"
                       name="mybank"
                       :disabled=false>
            <!-- 网商银行 -->
            <el-card class="box-card">
              <div slot="header"
                   class="clearfix">
                <span>网商银行配置列表</span>
              
              </div>
              <div class="text item">
                <template>
                  <el-table :data="tableData01"
                            style="width: 100%">
                    <el-table-column prop="user_id"
                                     label="用户ID"
                                     width="50">
                    </el-table-column>
                    <el-table-column prop="user_phone"
                                     label="用户电话"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="appid"
                                     label="appid"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="ISVORGID"
                                     label="ISVORGID"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="created_at"
                                     label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template>
                        <el-button type="primary"
                                   plain
                                   icon="el-icon-setting"
                                   size="small"
                                   >查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

  </div>
</template>

<script>
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import http from './../../config/index';
import api from './../../api/api';
export default {
  mounted: function () {
    this.initdata();
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data: () => {
    return {
      alipay: {},
      weixin: {},
      mybank: {},
      labelPosition: '',
      loading: false,
      cert_path: [],
      key_path: [],
      tableData01: []
    };
  },
  methods: {
    initdata: function () {
      this.getData(api.getPayConfigList, 'alipay');
      // this.getData(api.getwechatpayconfig);
    },
    handleClick (tab, event) {
      if (tab.name === 'alipay' && Object.keys(this.alipay).length === 0) {
        this.getData(api.getPayConfigList, tab.name);
      } else if (tab.name === 'weixin' && Object.keys(this.weixin).length === 0) {
        this.getData(api.getPayConfigList, tab.name);
      } else if (tab.name === 'mybank' && Object.keys(this.mybank).length === 0) {
        this.getData(api.getPayConfigList, tab.name);
      }
    },
    handleFile () {
      // console.log(this.fileList[0]);
    },
    cert_path_file (file, fileList) {
      this.cert_path = fileList;
    },
    key_path_file (file, fileList) {
      this.key_path = fileList;
    },
    clearUploadedImage (type) {
      if (type === 'upload') {
        this.$refs.upload.clearFiles();
        this.cert_path = [];
      } else if (type === 'upload1') {
        this.$refs.upload1.clearFiles();
        this.key_path = [];
      }
    },
    onSubmit (type) {
      let data = {};
      let url = '';
      if (type === 'alipay' && this.alipay !== []) {
        url = api.setalipayconfig;
        data = {
          'id': this.alipay.id,
          'app_id': this.alipay.app_id,
          'pid': this.alipay.pid,
          'rsaPrivateKey': this.alipay.rsaPrivateKey,
          'alipayrsaPublicKey': this.alipay.alipayrsaPublicKey,
          'callback': this.alipay.callback,
          'operate_notify_url': this.alipay.operate_notify_url,
          'notify': this.alipay.notify
        };
        data.token = localStorage.getItem('token');
        this.setData(url, data);
      }

      if (type === 'mybank') {
        url = api.setmybankconfig;
        data = {
          'id': this.mybank.id,
          'appid': this.mybank.appid,
          'isv_org_id': this.mybank.isv_org_id,
          'rsa_private_key': this.mybank.rsa_private_key,
          'rsa_public_key': this.mybank.rsa_public_key,
          'rsa_public_key_mybank': this.mybank.rsa_public_key_mybank,
          'dk_notify': this.mybank.dk_notify,
          'notify': this.mybank.notify
        };
        data.token = localStorage.getItem('token');
        this.setData(url, data);
      }

      if (type === 'weixin') {
        url = api.setwechatpayconfig;
        let form = this.$refs['weixinForm'].$el;
        let formData = new FormData(form);
        formData.append('token', localStorage.getItem('token'));
        formData.append('id', this.weixin.id);
        formData.append('app_id', this.weixin.app_id);
        formData.append('merchant_id', this.weixin.merchant_id);
        formData.append('secret', this.weixin.secret);
        formData.append('key', this.weixin.key);
        formData.append('notify_url', this.weixin.notify_url);
        formData.append('cert_path', this.cert_path[0] ? this.cert_path[0].raw : '');
        formData.append('key_path', this.key_path[0] ? this.key_path[0].raw : '');
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        http.form(url, formData, config, response => {
          // console.log(response.data);
          this.loading = false;
          if (response.code === '10001') {
            this.cert_path = [];
            this.key_path = [];
            this.$message('设置完成');
          } else {
            this.$message.error(response.msg);
          }
        }, () => {
          this.$message.error('网络错误');
          this.loading = false;
        });
      }
    },
    setData (url, data) {
      let that = this;
      this.loading = true;
      http.post(url, data, response => {
        that.loading = false;
        if (response.code === '10001') {
          that.$message('设置完成');
        } else {
          that.$message.error('设置失败');
        }
      }, () => {
        that.$message.error('网络错误');
        that.loading = false;
      });
    },
    getData (url, type = 'alipay') {
      let that = this;
      that.loading = true;
      http.get(url, {
        token: localStorage.getItem('token'),
        payways: type
      }, response => {
        that.loading = false;
        console.log(666);
        if (response.code === '10001') {
          switch (url) {
            case api.getPayConfigList:
              console.log(response.data.length);
              if (response.data.length > 0) {
                that.tableData01 = response.data;
              } else {
                that.tableData01 = response.data;
              }
              break;
            case '/system/getwechatpayconfig':
              if (response.data.length > 0) {
                that.alipay = response.data[0];
              } else {
                that.alipay = response.data;
              }
              break;
            case '/system/getmybankconfig':
              that.mybank = response.data[0];
              break;
          }
        }
      }, () => {
        that.$message.error('网络错误');
        that.loading = false;
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding 2rem
  padding-right 200px
  margin-top 15px
  margin-bottom 12px
  box-sizing border-box
  background #fff
  box-shadow 1px 1px 1px #999
  .form-item
    display inline-block
    margin-right 35px
    label
      font-size 14px
      color #333
      width 200px
      display inline-block
    .form-input, .form-select
      width 200px
  .line
    height 15px
.server-item
  width 20px
  height 20px
  margin 5px
</style>
